<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<style>
	.dav{
		position: relative;
		top: 200px;
		left:30% ;
	}
	.dbv{
		list-style-type: none;
		position: absolute;
		bottom: 0px;
		left: 12%;
		bottom: 1%;
		display: flex;
	}
	.dbv li{
		/* opacity: 0.2; */
		border: 1px solid red;
		border-radius: 50%;
		background-color: white;
		height: 16px;
		width: 16px;
	}
</style>
	</head>
	<body>
		<div class="dav">
			<a href="#"><img id="imga" src="img/1.jpg" alt=""></a>
			<ul class="dbv">
				<li class="lia" id="a1"></li>
				<li class="lia" id="a2"></li>
				<li class="lia" id="a3"></li>
				<li class="lia" id="a4"></li>
				<li class="lia" id="a5"></li>
			</ul>
		</div>
	</body>
	<script>
			var i = 1;
			function chuange() {
				let imga = document.querySelector("#imga");
				
				let a=document.querySelectorAll(".lia");
				// for(let j=0;j<a.length;j++){
				// 	a[j].style.backgroundColor="blue";
				// }
				if(i!=1){
					a[i-2].style.backgroundColor="white";
				}else{
					a[4].style.backgroundColor="white";
				}
				
				a[i-1].style.backgroundColor="red";
				imga.src = "img/" + i + ".jpg";
				
				i++;
				if (i > 5) {
					i = 1;
				}
			}
			var lun = setInterval(function() {
				chuange();
			}, 1000);
			var imgb = document.querySelector("#imga");
			imgb.onmouseover = function() {
				clearInterval(lun);
			};
			imgb.onmouseout = function() {
				lun= setInterval(function() {
				chuange();
			}, 1000);
				}
			
			
		</script>
</html>
